<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="350" :height="270" :left="uiLeft" :top="uiTop">
        <div class="box">
            <div class="center-table">
                <el-table :data="innerFieldsRef" border :cell-style="cellStyle2" :header-cell-style="cellStyleSmall"
                    min-height="180" @cell-dblclick="handleCellClick">
                    <el-table-column prop="key" label="名称" :show-overflow-tooltip="true" width="100" />
                    <el-table-column prop="value" label="值" :show-overflow-tooltip="true" width="auto">
                    </el-table-column>
                </el-table>
            </div>
            <div class="edit">
                <div class="pick-hidden">
                    <div>拾取后隐藏：</div>
                    <el-switch v-model="pickHiddenRef" size="small" />
                </div>
                <el-button @click="featureEdit.editEvent.emit(currentFeatureId, 'edit')"
                    :disabled="!innerFieldsRef.length">位置</el-button>
                <el-button @click="featureEdit.editEvent.emit(currentFeatureId, 'property')"
                    style="margin-left: 12px; height: 32px;" :disabled="!innerFieldsRef.length">属性</el-button>
                <!-- <el-button @click="featureEdit.editEvent.emit(currentFeatureId,'beautifyMaterails')"
                    :disabled="!innerFieldsRef.length">材质</el-button> -->
                <el-button :disabled="!innerFieldsRef.length" @click="distinctWindowVisible = !distinctWindowVisible"
                    style="margin-left: 12px;">清晰度</el-button>
            </div>
        </div>
    </Dialog>
    <div class="distinct-window" v-if="distinctWindowVisible">
        <div class="header"><span @click="closeWindow">✕</span></div>
        <div class="content">
            <el-select v-model="value" placeholder="请选择清晰度" size="large" style="width: 120px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button :disabled="!innerFieldsRef.length || value === ''" @click="confirm">确定</el-button>
        </div>
    </div>

</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { onMounted, ref, onBeforeUnmount, computed} from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "earthsdk-ui";
import {cellStyleSmall, cellStyle2, } from "../../scripts/tableStyle";
import { ElMessage } from "element-plus";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};
const uiLeft = document.body.clientWidth - 10 - 350;
const uiTop = 60;

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const cimrtsManager = getProjectManager().cimrtsManager;
const eSRtsTileset = cimrtsManager.eSRtsTileset;
const featureEdit = cimrtsManager.featureEdit as FeatureEdit;

// 内置属性
const innerFieldsRef = toVR<any>(d, [featureEdit, "innerFields"]);
// 拾取后隐藏
const pickHiddenRef = toVR<any>(d, [featureEdit, "pickHidden"]);


const currentFeatureId: any = computed(() => {
    return innerFieldsRef.value.length ? innerFieldsRef.value.find((item: any) => item.key === "id")?.value : ""
})

const distinctWindowVisible = ref(false);

const value = ref<string | number>("");

const options = [
    {
        value: 3,
        label: '清晰三级',
    },
    {
        value: 2,
        label: '清晰二级',
    },
    {
        value: 1,
        label: '清晰一级',
    },
    {
        value: -1,
        label: '模糊一级',
    },
    {
        value: -2,
        label: '模糊二级',
    },
    {
        value: -3,
        label: '模糊三级',
    },
]

const handleCellClick = (row:any, column:any) => {
  // 获取点击单元格的文本内容
  const text = row[column.property]
  // 复制文本到剪贴板
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).then(() => {
      ElMessage.success('已成功复制到剪贴板')
    })
  } else {
    // 浏览器禁用了非安全域的 navigator.clipboard 对象，下面的方法确保复制功能在特殊情况可用
    const textarea = document.createElement('textarea')
    textarea.value = text
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    ElMessage.success('已成功复制到剪贴板')
  }
}

// 清晰
const distinct = async () => {
    await featureEdit.changeDefinitionl(currentFeatureId.value, 1);
    const sceneObject = objm.getSceneObjectById(currentFeatureId.value)
    sceneObject && objm.destroySceneObject(sceneObject)
    cimrtsManager.eSRtsTileset.refresh();
}

// 关闭窗口
const closeWindow = () => {
    distinctWindowVisible.value = false;
    value.value = "";
}

// 确定按钮
const confirm = async () => {
    await featureEdit.changeDefinitionl(currentFeatureId.value, value.value as number);

    const treeItem = objm.cimrtsSceneTreeWrapper?.getTreeItemFromSceneObjId(currentFeatureId.value)
    if (treeItem) {
        objm.cimrtsSceneTreeWrapper?.destroySceneObjectTreeItem(treeItem)
    } else {
        const sceneObject = objm.getSceneObjectById(currentFeatureId.value)
        sceneObject && objm.destroySceneObject(sceneObject)
    }
    objm.propSceneTree = undefined
    closeWindow()
    cimrtsManager.eSRtsTileset.refresh();
    innerFieldsRef.value = [];

}

onMounted(() => {
    featureEdit.init();
});
onBeforeUnmount(() => {
    featureEdit.clear();
});

</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px 0;
}

.center-table {
    width: 100%;
    overflow: auto;
}

.edit {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.pick-hidden{
    display: flex;
    margin-right: 10px;
}
.distinct-window {
    z-index: 100;
    position: absolute;
    right: 10px;
    top: 340px;
    /* width: 200px; */
    /* height: 100px; */
    border-radius: 5px;
    background-color: #fff;
}

.header {
    padding-right: 5px;
    text-align: right;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
}

.header span {
    cursor: pointer;
}

.content {
    padding: 0 15px 15px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.el-button.el-button {
    margin-left: unset;
    width: 60px;
}

:deep(.el-select--large .el-select__wrapper) {
    height: 32px;
}
</style>